import Snake from './Snake'

class MoveArea {
  private element: HTMLElement
  constructor() {
    this.element = document.getElementById('move-area')!
  }
  get width() {
    return this.element.getBoundingClientRect().width
  }
  get height() {
    return this.element.getBoundingClientRect().height
  }

  /**
   * 根据蛇的大小计算移动区域可分为多少个格子
   */
  get gridsNums() {
    let wnum = Math.floor(this.width / Snake.width - 1)
    let hnum = Math.floor(this.height / Snake.height - 1)
    return wnum * hnum
  }

  /**
   * 获取传入元素 相对于 移动区域 的坐标值
   * 用offsetLeft也可以获得相对于移动区域的坐标，但是offsetLeft是一个整数，不够精确。
   * @param element
   * @returns
   */
  public getRelativeCoordinates(element: HTMLElement) {
    return {
      x:
        element.getBoundingClientRect().x -
        this.element.getBoundingClientRect().x,
      y:
        element.getBoundingClientRect().y -
        this.element.getBoundingClientRect().y
    }
  }
}

export default new MoveArea()
